<!DOCTYPE html>
<html>

<head>
    <!-- 缩放导致line-height变化 -->
    <meta charset="utf-8">
    <title>缩放导致line-height变化</title>


    <style>

        body{
            margin: 0;
            color: white;
            font-size: 14px;
        }

        .box1{
            background-color: teal;
            height: 20px;
        }

        .box2{
            background-color: pink;
            line-height: 20px;
        }

        .item{
            width: 250px;
        }

    </style>

</head>

<body>

    <div style="display: flex">
        <div class="item">
            <!-- 固定高度 -->
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
        </div>
        <div class="item">
            <!-- 使用line-height撑起来的高度 -->
            <div class="box2">1</div>
            <div class="box2">1</div>
            <div class="box2">1</div>
            <div class="box2">1</div>
            <div class="box2">1</div>
            <div class="box2">1</div>
            <div class="box2">1</div>
        </div>
    </div>

    

</body>

</html>